<template>
    <div>
        <el-space>
            <el-card style="width: 480px; height: 450px;" v-for="(item, index) in videoList" :key="index">
                <video-player :src="item.video_url" :autoplay="false" :options="playerOptions" :poster="poster"
                    :volume="0.6" />
                <el-divider></el-divider>
                <a class="text" :href="item.video_url" target="_Blank">{{ item.description }} </a>
            </el-card>
        </el-space>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getVideo } from '@/server/home/http'
const videoList = ref([])

//封面地址
const poster = ref('https://hdc-res-2023-1317708264.cos.ap-guangzhou.myqcloud.com/logo%2Flogo.png');

onMounted(() => {
    getVideoData()
})


// 视频播放器配置
let playerOptions = ref({
    // height: 200,
    // width: document.documentElement.clientWidth, //播放器宽度
    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
    // 如果true,浏览器准备好时开始回放。
    muted: true, // 默认情况下将会消除任何音频。
    loop: true, // 导致视频一结束就重新开始。
    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    language: 'zh-CN',
    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    notSupportedMessage: '此视频暂无法播放，请点击描述跳转播放', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    // 一个显示的海报帧，当视频加载时显示。
    controls: true,
    controlBar: {
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        fullscreenToggle: true // 全屏按钮
    }
})

const getVideoData = async () => {
    const res = await getVideo()
    if (res.code === 200) {
        videoList.value = res.data
    }
}


</script>

<style scoped lang="scss">
.text {
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 2;

}
</style>